﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background: #000;
			}
			
			img {
				width: 150px;
				height: 100px;
				position: absolute;
				cursor: pointer;
				border: 3px #fff solid;
			}
			
			#box1 {
				left: 50px;
				top: 20px;
			}
			
			#box2 {
				left: 300px;
				top: 20px;
			}
			
			#box3 {
				left: 50px;
				top: 200px;
			}
			
			.abc {
				border: 3px red solid;
				opacity: 0.5;
				filter: alpha(opacity=50);
			}
		</style>
	</head>

	<body>
		<img src="img/1.jpg" id="box1" />
		<img src="img/2.jpg" id="box2" />
		<img src="img/3.jpg" id="box3" />
	</body>
	<script type="text/javascript">
		var oBox = document.getElementById("box1");
		var oBox2 = document.getElementById("box2");
		var oBox3 = document.getElementById("box3");
		var aImg = document.getElementsByTagName("img");
		drag(oBox);
		drag(oBox2);
		drag(oBox3);
		//hitTest(oBox,oBox2);
		function drag(obj) {
			//声明两个用于存储固定距离的变量
			var disX; //水平固定
			var disY; //垂直固定
			var newObj = null;
			//在div上按下触发 
			//drag函数的封装
			obj.onmousedown = function(ev) {
				for (var i = 0; i < aImg.length; i++) {
					aImg[i].style.transition = "";
					aImg[i].style.zIndex = "1"
				};
				obj.style.zIndex = "999";
				var e = ev || event; //做一个事件对象的兼容
				disX = e.clientX - this.offsetLeft; //获取水平固定距离
				disY = e.clientY - this.offsetTop; //获取垂直固定距离
				if (e.preventDefault) {
					e.preventDefault();
				} else {
					e.returnValue = false;
				}
				//设置全局捕获
				obj.setCapture && obj.setCapture();
				//保存最初的obj 的位置
				var firstL = obj.offsetLeft;
				var firstT = obj.offsetTop;
				//在document上移动鼠标触发
				document.onmousemove = function(ev) {
						var e = ev || event;
						var valueX = e.clientX - disX;
						var valueY = e.clientY - disY;
						var maxL = document.documentElement.clientWidth - obj.offsetWidth;
						var maxT = document.documentElement.clientHeight - obj.offsetHeight;
						//三目运算符  简化判断的代码
						valueX = valueX < 0 ? 0 : valueX;
						valueX = valueX > maxL ? maxL : valueX;
						valueY = valueY < 0 ? 0 : valueY;
						valueY = valueY > maxT ? maxT : valueY;
						//让一个实时变化的鼠标坐标减去一个固定距离，就可以得到实时刷新的div的坐标
						obj.style.left = valueX + "px";
						obj.style.top = valueY + "px";
						//碰撞检测
						newObj = null;
						var arr = []; //建立数组用于存储碰撞上的图片
						for (var i = 0; i < aImg.length; i++) {
							if (aImg[i] != obj) {
								if (hitTest(aImg[i], obj)) {
									arr.push(aImg[i]);
								}
							}
						};
						var min = Infinity;
						//遍历数组
						for (var i = 0; i < arr.length; i++) {
							var a = arr[i].offsetLeft - obj.offsetLeft;
							var b = arr[i].offsetTop - obj.offsetTop;
							var value = a * a + b * b; //平方和
							if (min > value) {
								min = value;
								newObj = arr[i];
							}
						};
						//console.log(newObj);
					}
					//鼠标弹起的时候
				document.onmouseup = function() {
					//取消鼠标移动和鼠标弹起的事件绑定
					document.onmouseup = document.onmousemove = null;
					//释放全局捕获
					obj.releaseCapture && obj.releaseCapture();
					if (newObj) {
						obj.style.transition = "0.5s";
						newObj.style.transition = "0.5s";
						obj.style.left = newObj.offsetLeft + "px";
						obj.style.top = newObj.offsetTop + "px";
						newObj.style.left = firstL + "px";
						newObj.style.top = firstT + "px";
					} else {
						obj.style.transition = "0.5s"
						obj.style.left = firstL + "px";
						obj.style.top = firstT + "px";
					}
					obj.style.zIndex = "1";
				}
			}
		}
		//碰撞检测函数
		function hitTest(obj, obj2) {
			//先把obj那一堆获取
			var objL = obj.offsetLeft;
			var objT = obj.offsetTop;
			var objW = obj.offsetWidth;
			var objH = obj.offsetHeight;
			//获取obj2那一堆
			var obj2L = obj2.offsetLeft;
			var obj2T = obj2.offsetTop;
			var obj2W = obj2.offsetWidth;
			var obj2H = obj2.offsetHeight;
			if (objL + objW < obj2L || objT + objH < obj2T || obj2L + obj2W < objL || obj2T + obj2H < objT) {
				return false;
			} else {
				return true;
			}
		}
	</script>

</html>